
 <!DOCTYPE HTML>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  
    <title>前端学习-CSS | 哆啦A梦BLOG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    
    <meta name="author" content="大雄の梦">
    

    
    <meta name="description" content="CSS-初印象CSS全称为层叠样式表 (Cascading Style Sheets)(级联样式表)前端页面是把网页分成三个层次，即：HTML(结构层)、CSS(表示层)以及JavaScript(行为层)，而CSS通俗的说就像是女生的化妆品，用来美化结构层的。1.CSS三种写法： ①内部样式  1234567 &amp;lt;head&amp;gt;   &amp;lt;meta charset=&amp;quot;UTF-8&amp;">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="前端学习-CSS">
<meta property="og:url" content="https://hdiebk.github.io/2018/07/24/blog-css/index.html">
<meta property="og:site_name" content="哆啦A梦BLOG">
<meta property="og:description" content="CSS-初印象CSS全称为层叠样式表 (Cascading Style Sheets)(级联样式表)前端页面是把网页分成三个层次，即：HTML(结构层)、CSS(表示层)以及JavaScript(行为层)，而CSS通俗的说就像是女生的化妆品，用来美化结构层的。1.CSS三种写法： ①内部样式  1234567 &amp;lt;head&amp;gt;   &amp;lt;meta charset=&amp;quot;UTF-8&amp;">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjd7qvib15pq1h3c1ibr1q0cl26a.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdcevp4l5s1kkk13jkqe91tera.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdcdbi1mpq1h711h9i1o8l1cuna.jpg-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjden958tc21ain1vfovh4uura.jpg-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdev10f6s1105hn4c1n8ddsqa.jpg-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdjr71t7981dq81s26jpi5qpa.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdlf2eebcg16921plh1vfh1j28a.jpg-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdlnh8edbr1c881b0lge1agca.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdlttaj1pg712vq1sjs1gjj1rv9a.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdm575119683u21ho81g7a99na.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdm6e6125lttj9o513k11rkqa.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdpikrl1nk6ben16tf16nejppa.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdppitm5dfrr814ksfm6odoa.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdptnbs121ha1h1usbmdsekca.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdq4e9t1aj0cik6um4uf81ca.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdq7rgf1h2p1pjpomf1fe919n8a.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdqcskinjm1ikr124a7qq1fvga.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdqedsn11ko1n2mgo4emcnfha.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdqmc9s1pq513ib1251og1geea.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdqogid1bu6e2910611tppou6a.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdr0h8j1bdn6hmbe71sha1gl2a.png-w.jpg">
<meta property="og:image" content="http://t1.aixinxi.net/o_1cjdr37d21co1e2a4b0gu5upqa.png-w.jpg">
<meta property="og:updated_time" content="2018-07-27T13:50:29.973Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端学习-CSS">
<meta name="twitter:description" content="CSS-初印象CSS全称为层叠样式表 (Cascading Style Sheets)(级联样式表)前端页面是把网页分成三个层次，即：HTML(结构层)、CSS(表示层)以及JavaScript(行为层)，而CSS通俗的说就像是女生的化妆品，用来美化结构层的。1.CSS三种写法： ①内部样式  1234567 &amp;lt;head&amp;gt;   &amp;lt;meta charset=&amp;quot;UTF-8&amp;">
<meta name="twitter:image" content="http://t1.aixinxi.net/o_1cjd7qvib15pq1h3c1ibr1q0cl26a.png-w.jpg">

    
    <link rel="alternative" href="/atom.xml" title="哆啦A梦BLOG" type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/logoA.png">
    <link rel="apple-touch-icon-precomposed" href="/img/logoA.png">
    
    <link rel="stylesheet" href="/css/style.css">
</head>

  <body>
    <header>
      
<div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/logoA.png" alt="哆啦A梦BLOG" title="哆啦A梦BLOG"/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="哆啦A梦BLOG">哆啦A梦BLOG</a></h1>
				<h2 class="blog-motto">在有生之年，努力去做好自己喜爱的事情。</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="Menu">
			</a></div>
			<nav class="animated">
				<ul>
					<ul>
					 
						<li><a href="/">首页（Home）</a></li>
					
						<li><a href="/archives">归档（archives）</a></li>
					
						<li><a href="/tags">标签（tags）</a></li>
					
						<li><a href="/about">关于（about）</a></li>
					
					<li>
 					
					<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
						<label>Search</label>
						<input type="search" id="search" name="q" autocomplete="off" maxlength="20" placeholder="Search" />
						<input type="hidden" name="q" value="site:hdiebk.github.io">
					</form>
					
					</li>
				</ul>
			</nav>			
</div>
    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
  
    <article itemprop="articleBody">
        <header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2018/07/24/blog-css/" title="前端学习-CSS" itemprop="url">前端学习-CSS</a>
  </h1>
  <p class="article-author">By
       
		<a href="/about" title="大雄の梦" target="_blank" itemprop="author">大雄の梦</a>
		
  <p class="article-time">
    <time datetime="2018-07-24T08:24:12.000Z" itemprop="datePublished"> Published 2018-07-24</time>

<span id="busuanzi_container_page_pv">
    总阅读<span id="busuanzi_value_page_pv"></span>次
</span>
  </p>
</header>

    <div class="article-content">

        

        
        <div id="toc" class="toc-article">
            <strong class="toc-title">Contents</strong>
        
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">1.</span> <span class="toc-text">CSS-初印象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">1.0.1.</span> <span class="toc-text">CSS全称为层叠样式表 (Cascading Style Sheets)(级联样式表)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">2.</span> <span class="toc-text">1.CSS三种写法：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">2.0.1.</span> <span class="toc-text">2.认识标签类型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">3.</span> <span class="toc-text">CSS选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.1.</span> <span class="toc-text">选择器是一种选择标签的过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.2.</span> <span class="toc-text">标签选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.3.</span> <span class="toc-text">属性选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.4.</span> <span class="toc-text">类选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.5.</span> <span class="toc-text">ID选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.6.</span> <span class="toc-text">通配符</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">4.</span> <span class="toc-text">css复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.1.</span> <span class="toc-text">交集选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.2.</span> <span class="toc-text">后代选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.3.</span> <span class="toc-text">子代选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.4.</span> <span class="toc-text">并集选择器（群选择器）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.5.</span> <span class="toc-text">伪类选择器</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">5.</span> <span class="toc-text">文本元素</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.1.</span> <span class="toc-text">属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.2.</span> <span class="toc-text">文本属性连写</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.3.</span> <span class="toc-text">文字的表达方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.4.</span> <span class="toc-text">文本修饰</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">6.</span> <span class="toc-text">CSS三大特性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">6.0.1.</span> <span class="toc-text">层叠性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">6.0.2.</span> <span class="toc-text">继承性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">6.0.3.</span> <span class="toc-text">优先级</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">7.</span> <span class="toc-text">背景属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">7.0.1.</span> <span class="toc-text">背景属性连写</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">7.0.2.</span> <span class="toc-text">行高</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">8.</span> <span class="toc-text">盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.1.</span> <span class="toc-text">border（边框）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.2.</span> <span class="toc-text">padding（内边距）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.3.</span> <span class="toc-text">margin（外边距）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.4.</span> <span class="toc-text">标准盒子模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.5.</span> <span class="toc-text">IE盒子模型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">9.</span> <span class="toc-text">浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.1.</span> <span class="toc-text">文档流（标准流）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.2.</span> <span class="toc-text">浮动布局</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.3.</span> <span class="toc-text">制作导航（经常使用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.4.</span> <span class="toc-text">清除浮动</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">10.</span> <span class="toc-text">CSS初始化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.1.</span> <span class="toc-text">overflow</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.2.</span> <span class="toc-text">定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.3.</span> <span class="toc-text">静态定位（默认值）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.4.</span> <span class="toc-text">绝对定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.5.</span> <span class="toc-text">相对定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.6.</span> <span class="toc-text">固定定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.7.</span> <span class="toc-text">定位（脱标）的盒子居中对齐</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">11.</span> <span class="toc-text">标签包含规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">11.0.1.</span> <span class="toc-text">规避脱标流</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">12.</span> <span class="toc-text">图片和文字垂直居中对齐</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">13.</span> <span class="toc-text">CSS可见性</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">14.</span> <span class="toc-text">css之内容移除（logo优化）</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">15.</span> <span class="toc-text">CSS精灵图</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">15.0.1.</span> <span class="toc-text">工作原理：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">16.</span> <span class="toc-text">CSS滑动门</span></a></li></ol>
        
        </div>
        
        <h1>CSS-初印象</h1><h3>CSS全称为层叠样式表 (Cascading Style Sheets)(级联样式表)</h3><p>前端页面是把网页分成三个层次，即：HTML(结构层)、CSS(表示层)以及JavaScript(行为层)，而CSS通俗的说就像是女生的化妆品，用来美化结构层的。</p><br><h1>1.CSS三种写法：</h1><br> ①内部样式<br>  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> &lt;head&gt;</span><br><span class="line">   &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">   &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">   &lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">   &lt;!-- 样式内容 --&gt;</span><br><span class="line">   &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br></pre></td></tr></table></figure><br><br>  ②外联样式<br>  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> &lt;head&gt;</span><br><span class="line">   &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">   &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">   &lt;link rel=”stylesheet” href=”css的路径”&gt;  &lt;!-- 在head里面 --&gt;</span><br><span class="line">&lt;/head&gt;</span><br></pre></td></tr></table></figure><br><br>  ③行内样式<br>      通过内嵌(style=”xxx;”)来书写样式代码<br>  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p style=&quot;background:#f5f9fa;&quot;&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure><br><br>  三种样式写法区别：<br>  内嵌法：样式只能作用于当前页面，不能被其他页面共享使用，代码量多的时候，界面容易混淆。<br>  外联法：作用范围是当前站点，现实了结构分离 谁调用谁生效，范围广，可以被其他页面共享。<br>  行内法：作用范围仅限当前标签，范围小，结构表现混在一起，代码量多的时候容易混淆。<br><h3>2.认识标签类型</h3><br>①块级元素<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">代表元素：&lt;div&gt;、&lt;p&gt;、&lt;h1&gt;…&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;li&gt;、&lt;address&gt;、&lt;blockquote&gt;、&lt;form&gt;</span><br></pre></td></tr></table></figure><br><br>②行内元素<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">代表元素：&lt;a&gt;、&lt;span&gt;、&lt;i&gt;、&lt;em&gt;、&lt;strong&gt;、&lt;label&gt;、&lt;q&gt;、&lt;var&gt;、&lt;cite&gt;、&lt;code&gt;</span><br></pre></td></tr></table></figure><br><br>③行内快元素也称之为内联元素<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">代表元素：&lt;input&gt;,&lt;img&gt;</span><br></pre></td></tr></table></figure><br><br><p>三种元素的特点：</p>①块元素:<pre>1.每个快属性标签都是从新的一行开始，而且之前的元素也会从下一行开始（独占一行）<br>2.快元素属性都可以设置宽，高，行高，间距<br>3.块元素属性宽度如果没有设置，则会默认父元素宽度的100%<br>4.块属性可以直接嵌套（p标签中不能嵌套div标签）<br></pre><br>②行内元素：<pre>1.行内元素和其它标签同处一行显示<br>2.行内元素无法设置宽，高，行高，间距<br>3.行元素的宽 高是直接由内部的文字或者图片等内容撑开（宽 高度由内容撑开）<br>4.行属性标签内部不能嵌套行属性标签（a链接内不能嵌套其他链接）<br></pre><br>③行内块元素：<pre>1.在同一行上显示<br>2.可以设置宽 高<br></pre><br>三者可以相互转换<br>   块元素转行内元素<br>   <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display:inline;</span><br></pre></td></tr></table></figure><br><br>   行内元素转换块元素<br>   <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display:block;</span><br></pre></td></tr></table></figure><br><br>   块元素和行内元素转换行内块元素(使用率最高)<br>   <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display:inline-block;</span><br></pre></td></tr></table></figure><br><br><h1>CSS选择器</h1><br><h3>选择器是一种选择标签的过程</h3><br>一个简单的标签如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器&#123;属性:值;属性:值......&#125;</span><br></pre></td></tr></table></figure><br><br>选择器的类型：<br>   <h3>标签选择器</h3><br>   <pre>标签{属性:值;}<br>   //特点：标签选择器定义之后。会将页面所有元素都执行这个标签样式。<br>  </pre><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">        div&#123;</span><br><span class="line">            font-size: 50px;</span><br><span class="line">            color: red  &lt;!-- 定义div标签字体大小为50px;总体颜色为红色 --&gt;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div&gt;这是一个div&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure><br><br><h3>属性选择器</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">input[type=&quot;text&quot;][class] &#123;</span><br><span class="line">  width: 20px;</span><br><span class="line">  height: 20px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br><br><b>选择有type属性为text，并且有class属性的标签。</b><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">input[type=&quot;text&quot;][class=&quot;id&quot;] &#123;</span><br><span class="line">  width: 20px;</span><br><span class="line">  height: 20px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br><br><b>选择有type属性为text，并且有class属性，并且class属性为 id 的标签。</b><br><br><h3>类选择器<em></em></h3><br><pre>.类名{属性:值;属性:值;}<br>  // 特点：谁调用，谁生效。一个类选择器可以被多个标签调用，同时一个标签可以调用多个类（类名可被多次调用）<br></pre><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;background-color:#ccc;&#125;</span><br><span class="line"></span><br><span class="line">&lt;div class=&quot;box&quot;&gt;这是一个div&lt;/div&gt;  </span><br><span class="line">&lt;!-- 调用类名为box  --&gt;</span><br></pre></td></tr></table></figure><br><br><ol>类选择器命名规则<br><li>不能以纯数字或者数字开头定义类名</li><li>不能使用特殊符号或者特殊符号开头(_ 除开)定义类名</li><li>不建议使用中文来命名</li><li>不推荐使用属性或者属性的值来命名</li></ol><br><p>常用命名</p><br><img src="http://t1.aixinxi.net/o_1cjd7qvib15pq1h3c1ibr1q0cl26a.png-w.jpg"><br><h3>ID选择器</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">#自定义名称&#123;属性:值;&#125;</span><br></pre></td></tr></table></figure><br><br>  //特点：<br><strong>1.一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。<br>2.一个标签只能调用一个ID选择器。<br>3.一个标签可以同时调用类选择器和ID选择器。<br></strong><br><h3>通配符</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">*&#123;属性:值;&#125;&#123;属性:值;&#125;</span><br></pre></td></tr></table></figure><br><br><strong>特点：<br>   1.给所有的标签都使用相同的样式。<br>  2.不推荐使用，增加浏览器和服务器负担</strong><br>  <h1>css复合选择器</h1><br><strong>概念：复合选择器就是两个或多个基本选择器，通过不同的方式连接成的选择器。</strong><br>  <h3>交集选择器</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">标签+类（ID）选择器&#123;属性：值；&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">span.box&#123;font-size:16px;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">特点：即要满足使用了某个标签，还要满足使用了类选择器或者ID选择器。</span><br></pre></td></tr></table></figure><br><br><h3>后代选择器</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">选择器+空格+选择器&#123;属性：值;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">body div span&#123;font-size:16px;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">后代选择器首选要满足包含（嵌套）关系。</span><br><span class="line">父集元素在前边，子集元素在后边。</span><br><span class="line">特点：无限制隔代。（下面都会生效）</span><br></pre></td></tr></table></figure><br><br><h3>子代选择器</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">选择器&gt;选择器&#123;属性:值;&#125;</span><br><span class="line"></span><br><span class="line">h1 &gt; strong &#123;font-size:16px;&#125;</span><br><span class="line"></span><br><span class="line">这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：</span><br><span class="line"></span><br><span class="line">&lt;h1&gt;This is &lt;strong&gt;very&lt;/strong&gt; &lt;strong&gt;very&lt;/strong&gt; important.&lt;/h1&gt;</span><br><span class="line">&lt;h1&gt;This is &lt;em&gt;really &lt;strong&gt;very&lt;/strong&gt;&lt;/em&gt; important.&lt;/h1&gt;</span><br></pre></td></tr></table></figure><br><br><h3>并集选择器（群选择器）</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">选择器+，+选择器+，选择器&#123;属性:值;&#125;</span><br><span class="line">span ,body ,.blue &#123;font-size:16px;&#125;</span><br></pre></td></tr></table></figure><br><br><h3>伪类选择器</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">div:link&#123;...&#125;       链接默认状态</span><br><span class="line"></span><br><span class="line">div:visited&#123;...&#125;     链接访问之后的状态</span><br><span class="line"></span><br><span class="line">div:hover&#123;...&#125;       鼠标放到链接上显示的状态</span><br><span class="line"></span><br><span class="line">div:active&#123;...&#125;      链接激活的状态</span><br><span class="line"></span><br><span class="line">如果需要全部，则必须按照L V H A 这个顺序写，否则会出现不显示的情况</span><br><span class="line"></span><br><span class="line">div:focus&#123;...&#125;        获取焦点</span><br></pre></td></tr></table></figure><br><br><h1>文本元素</h1><br><h3>属性</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">font-size:50px;         //文字大小</span><br><span class="line">font-weight: 700;       //值从100-900，文字粗细,700约等于Bold，不推荐使用font-weight:bold;</span><br><span class="line">font-family:微软雅黑;    //文本的字体</span><br><span class="line">font-style: normal | italic;  //normal:默认值  italic:斜体</span><br><span class="line">line-height:             //行高</span><br></pre></td></tr></table></figure><br><br><h3>文本属性连写</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">font: font-style font-weight  font-size/line-height  font-family;</span><br><span class="line">font: italic 700 50px/40px  微软雅黑;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">注意：font:后边写属性的值。一定按照书写顺序。</span><br><span class="line">文本属性连写文字大小和字体为必写项。</span><br></pre></td></tr></table></figure><br><br><h3>文字的表达方式</h3><br> 1.直接写中文名称<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">font-family: 微软雅黑;</span><br></pre></td></tr></table></figure><br><br> 2.写字体的英文名称<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">font-family: microsoft yahei;</span><br></pre></td></tr></table></figure><br><br>  <p>3.unicode 编码（解析更快）</p><br>  <img src="http://t1.aixinxi.net/o_1cjdcevp4l5s1kkk13jkqe91tera.png-w.jpg"><br><pre><br>如何找到某一字体相对应的unicode编码呢？<br><br>第一步：f12<br>第二步：找到console<br>第三步：输入escape(“宋体”) 注意英文的括号和双引号。<br></pre><br><img src="http://t1.aixinxi.net/o_1cjdcdbi1mpq1h711h9i1o8l1cuna.jpg-w.jpg"><br><h3>文本修饰</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text-decoration:  none | underline | line-through | ...... // 链接下划线/删除线/......</span><br></pre></td></tr></table></figure><br><br><h1>CSS三大特性</h1><br><h3>层叠性</h3><br>当多个样式作用于同一个（同一类）标签时，样式发生了冲突，<strong>总是执行后边的代码(后边代码层叠前边的代码)。</strong>和标签调用选择器的顺序没有关系。<br><br><h3>继承性</h3><br>继承性发生的前提是包含（嵌套关系）<br>★文字颜色可以继承<br>★文字大小可以继承<br>★字体可以继续<br>★字体粗细可以继承<br>★文字风格可以继承<br>★行高可以继承<br><b>总结：</b>文字的所有属性都可以继承。<br><br><b>特殊情况：</b>h系列不能继承文字大小。（继承了但是不显示）（h1显示的是：你设置的font-size  2<br>h2显示的是：你设置的font-size * 1.5…….）<br><br>a链接标签不能继承文字颜色（继承了但是不显示，链接标签默认是蓝色）<br><br><h3>优先级</h3><br><strong>不同级别</strong><br>1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。<br>2.作为style属性写在元素内的样式<br>3.id选择器<br>4.类选择器<br>5.通配符选择器<br>6.浏览器自定义或继承<br><br><b>它们的优先级为：!important &gt; 行内样式&gt;ID选择器 &gt; 类选择器 &gt; 标签 &gt; 通配符 &gt; 继承 &gt; 浏览器默认属性</b><br><br><strong>同一级别</strong><br>1.同一级别中后写的会覆盖先写的样式<br>2.应用权重计算（所用数字并不代表它们只值那个数，只是用来具体说明问题）<br><p></p><br> <li>内联样式表的权值为 1000</li><br> <li>ID 选择器的权值为 100</li><br> <li>Class 类选择器的权值为 10</li><br> <li>HTML 标签选择器的权值为 1</li><br><br><br><br><h1>背景属性</h1><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">background-color：    背景颜色</span><br><span class="line">background-image：    背景图片</span><br><span class="line">Background-repeat：    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺</span><br><span class="line">Background-position：  left  |  right  |  center（默认）  |  top  | bottom  背景定位</span><br><span class="line">Background-attachment   背景是否滚动   scroll（默认）  |  fixed</span><br></pre></td></tr></table></figure><br><br>Background-position  背景定位<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">background-position: right; // 方位值只写一个的时候，另外一个值默认居中。</span><br><span class="line"></span><br><span class="line">background-position: right bottom // 写2个方位值的时候，顺序没有要求</span><br><span class="line"></span><br><span class="line">background-position: 20px 30px // 写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向</span><br></pre></td></tr></table></figure><br><br>Background-attachment 背景滚动<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示</span><br><span class="line"></span><br><span class="line">fixed：背景图的位置是基于整个浏览器body的范围进行显示，如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div</span><br><span class="line">的范围内的话，背景图无法显示。</span><br></pre></td></tr></table></figure><br><br><h3>背景属性连写</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background: red url(&quot;1.png&quot;) no-repeat 30px 40px scroll;</span><br><span class="line"></span><br><span class="line">连写的时候没有顺序要求，url为必写项</span><br></pre></td></tr></table></figure><br><br><h3>行高</h3><br>浏览器默认文字大小：16px<br><br>行高：是基线与基线之间的距离<br>行高 = 文字高度+上下边距<br><br>推荐行高使用像素为单位。<br><br><h1>盒子模型</h1><br><h3>border（边框）</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Border-top-style:  solid   实线</span><br><span class="line">                    dotted  点线</span><br><span class="line">                    dashed  虚线</span><br><span class="line">                        none 无边框</span><br><span class="line">Border-top-color   边框颜色</span><br><span class="line">Border-top-width   边框粗细</span><br><span class="line">除了有top系列外还有left,right,bottom系列</span><br></pre></td></tr></table></figure><br><br>边框属性的连写<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">border-top: 1px solid #fff;</span><br><span class="line">没有顺序要求，线型为必写项</span><br></pre></td></tr></table></figure><br><br>四个边框值相同的写法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">border: 1px solid #fff;</span><br><span class="line">没有顺序要求，线型为必写项</span><br></pre></td></tr></table></figure><br><br>边框合并（细线边框）<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border-collapse:collapse;</span><br></pre></td></tr></table></figure><br><br>获取焦点<br><br><i>label for id 获取光标焦点（点击label也可以选择文本框）</i><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;label for=&quot;username&quot;&gt;用户名：&lt;/label&gt;&lt;input type=&quot;text&quot; class=&quot;username&quot; id=&quot;username&quot;&gt;&lt;/input&gt;</span><br></pre></td></tr></table></figure><br><br><label for="username">用户名：</label><input type="text" class="username" id="username"><br><br><br><h3>padding（内边距）</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">padding-left   |   right    |  top  |  bottom</span><br></pre></td></tr></table></figure><br><br>padding连写<br><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Padding: 20px;   //上右下左内边距都是20px</span><br><span class="line">Padding: 20px 30px;   //上下20px   左右30px</span><br><span class="line">Padding: 20px  30px  40px;  // 上内边距为20px  左右内边距为30px   下内边距为40</span><br><span class="line">Padding: 20px  30px   40px  50px;   //上20px 右30px  下40px  左  50px</span><br></pre></td></tr></table></figure><br><br><h3>margin（外边距）</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">margin-left   | right  |  top  |  bottom</span><br></pre></td></tr></table></figure><br><br> 外边距连写<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Margin: 20px;    上下左右外边距20PX</span><br><span class="line">Margin: 20px 30px;   上下20px  左右30px</span><br><span class="line">（margin: 0 auto; 盒子居中对齐  text-align:center 是盒子里面的内容居中）</span><br><span class="line">Margin: 20px  30px  40px;     上20px  左右30px   下  40px</span><br><span class="line">Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px</span><br></pre></td></tr></table></figure><br><br>  垂直方向外边距合并（取最大值）<br><b>两个盒子垂直，一个设置上外边距，一个设置下外边距，取的设置较大的值。</b><br><br>  嵌套的盒子外边距塌陷<br><b>嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距的塌陷（父盒子跟着移动）</b><br>解决方法:<br><br>1.给父盒子设置边框<br><br>2.给父盒子overflow:hidden;<br><br><h3>标准盒子模型</h3><br><img src="http://t1.aixinxi.net/o_1cjden958tc21ain1vfovh4uura.jpg-w.jpg"><br><strong>从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。(width和height是content的长与宽 )</strong><br><h3>IE盒子模型</h3><br><img src="http://t1.aixinxi.net/o_1cjdev10f6s1105hn4c1n8ddsqa.jpg-w.jpg"><br><strong>从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。</strong><br><br>它们转换的方法：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">box-sizing: border-box; IE盒子</span><br><span class="line">box-sizing: content-box;  W3C盒子</span><br></pre></td></tr></table></figure><br><br><h1>浮动</h1><br> <h3>文档流（标准流）</h3><br>元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。<br><br><h3>浮动布局</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">float:  left   |   right （浮动方向）</span><br></pre></td></tr></table></figure><br><br>特点：<br>1.元素浮动之后不占据原来的位置（脱标）<br>2.浮动的盒子在一行上显示<br>3.行内元素浮动之后自动转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）<br><br>浮动的作用<br>文本绕图<br><img src="http://t1.aixinxi.net/o_1cjdjr71t7981dq81s26jpi5qpa.png-w.jpg"><br><h3>制作导航（经常使用）</h3><br>- 把无序列表ul li 浮动起来做成的导航。<br><img src="http://t1.aixinxi.net/o_1cjdlf2eebcg16921plh1vfh1j28a.jpg-w.jpg"><br>html部分：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div class=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt; 首页&lt;/li&gt;</span><br><span class="line">      &lt;li&gt; 资讯&lt;/li&gt;</span><br><span class="line">      &lt;li&gt; 服务&lt;/li&gt;</span><br><span class="line">      &lt;li&gt; 售后&lt;/li&gt;</span><br><span class="line">      &lt;li&gt; 关于&lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure><br><br> css部分：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">*&#123;</span><br><span class="line">  margin: 0;</span><br><span class="line">  padding: 0;</span><br><span class="line">&#125;</span><br><span class="line">  .nav&#123;</span><br><span class="line">    width: 100%;</span><br><span class="line">    height: 60px;</span><br><span class="line">    background-color: #56d;</span><br><span class="line">  &#125;</span><br><span class="line">  .nav li&#123;</span><br><span class="line">    line-height: 60px;</span><br><span class="line">    float: left;</span><br><span class="line">    margin: 0 50px;</span><br><span class="line">    list-style: none;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><br><br>- 网页布局<br><img src="http://t1.aixinxi.net/o_1cjdlnh8edbr1c881b0lge1agca.png-w.jpg"><br><br><h3>清除浮动</h3><br>问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。<br><br><b>清除浮动不是不用浮动，清除浮动产生的问题。</b><br><br><li>方法一</li><br>额外标签法：在最后一个浮动元素后添加标签。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clear: left  |  right  | both // 工作里用的最多的是clear:both;</span><br></pre></td></tr></table></figure><br><br><img src="http://t1.aixinxi.net/o_1cjdlttaj1pg712vq1sjs1gjj1rv9a.png-w.jpg"><br><br><li>方法二</li><br>给浮动元素的父集元素使用<pre>overflow:hidden;</pre><br><img src="http://t1.aixinxi.net/o_1cjdm575119683u21ho81g7a99na.png-w.jpg"><br>注意：如果有内容出了盒子，不能使用这个方法。<br><br><li>方法三</li>（推荐使用）<br>伪元素清除浮动<br><img src="http://t1.aixinxi.net/o_1cjdm6e6125lttj9o513k11rkqa.png-w.jpg"><br><br><strong>:after 相当于在当前盒子后加了一个盒子。</strong><br><br><h1>CSS初始化</h1><br>- 腾讯<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select&#123;margin:0;padding:0&#125;</span><br><span class="line"></span><br><span class="line">body&#123;font:12px&quot;宋体&quot;,&quot;Arial Narrow&quot;,HELVETICA;background:#fff;-webkit-text-size-adjust:100%;&#125;</span><br><span class="line"></span><br><span class="line">a&#123;color:#2d374b;text-decoration:none&#125;</span><br><span class="line"></span><br><span class="line">a:hover&#123;color:#cd0200;text-decoration:underline&#125;</span><br><span class="line"></span><br><span class="line">em&#123;font-style:normal&#125;</span><br><span class="line"></span><br><span class="line">li&#123;list-style:none&#125;</span><br><span class="line"></span><br><span class="line">img&#123;border:0;vertical-align:middle&#125;</span><br><span class="line"></span><br><span class="line">table&#123;border-collapse:collapse;border-spacing:0&#125;</span><br><span class="line"></span><br><span class="line">p&#123;word-wrap:break-word&#125;</span><br></pre></td></tr></table></figure><br><br>- 新浪<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div&#123;margin:0;padding:0;border:0;&#125;</span><br><span class="line">body&#123;background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:&quot;SimSun&quot;,&quot;宋体&quot;,&quot;Arial Narrow&quot;;&#125;</span><br><span class="line">ul,ol&#123;list-style-type:none;&#125;</span><br><span class="line">select,input,img,select&#123;vertical-align:middle;&#125;</span><br><span class="line">a&#123;text-decoration:none;&#125;</span><br><span class="line">a:link&#123;color:#009;&#125;</span><br><span class="line">a:visited&#123;color:#800080;&#125;</span><br><span class="line">a:hover,a:active,a:focus&#123;color:#c00;text-decoration:underline;&#125;</span><br></pre></td></tr></table></figure><br><br>- 淘宝<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td &#123; margin:0; padding:0; &#125;</span><br><span class="line">body, button, input, select, textarea &#123; font:12px/1.5tahoma, arial, \5b8b\4f53; &#125;</span><br><span class="line">h1, h2, h3, h4, h5, h6&#123; font-size:100%; &#125;</span><br><span class="line">address, cite, dfn, em, var &#123; font-style:normal; &#125;</span><br><span class="line">code, kbd, pre, samp &#123; font-family:couriernew, courier, monospace; &#125;</span><br><span class="line">small&#123; font-size:12px; &#125;</span><br><span class="line">ul, ol &#123; list-style:none; &#125;</span><br><span class="line">a &#123; text-decoration:none; &#125;</span><br><span class="line">a:hover &#123; text-decoration:underline; &#125;</span><br><span class="line">sup &#123; vertical-align:text-top; &#125;</span><br><span class="line">sub&#123; vertical-align:text-bottom; &#125;</span><br><span class="line">legend &#123; color:#000; &#125;</span><br><span class="line">fieldset, img &#123; border:0; &#125;</span><br><span class="line">button, input, select, textarea &#123; font-size:100%; &#125;</span><br><span class="line">table &#123; border-collapse:collapse; border-spacing:0; &#125;</span><br></pre></td></tr></table></figure><br><br><h3>overflow</h3><br><pre><br>overflow属性规定当内容溢出元素框时发生的事情.<br><br>scroll：一直有滚动条.<br>auto：只有内容出了盒子才有滚动条。</pre><br><br><h3>定位</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">定位方向: left | right | top | bottom</span><br></pre></td></tr></table></figure><br><br><h3>静态定位（默认值）</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">position: static; // 就是文档流式的定位模式。</span><br></pre></td></tr></table></figure><br><br><h3>绝对定位</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">position:absolute;</span><br><span class="line"></span><br><span class="line">然后使用left | right | top | bottom 来确定具体位置。</span><br></pre></td></tr></table></figure><br><br><b>特点：</b><br>1.元素使用绝对定位之后不占据原来的位置（脱标）<br>2.元素使用绝对定位，位置是从浏览器出发。<br>3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。<br>4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。<br>5.给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）<br><br><h3>相对定位</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">position: relative;</span><br></pre></td></tr></table></figure><br><br><b>特点：</b><br>1.使用相对定位，位置从自身出发。<br>2.不脱标，其他的元素不能占有其原来的位置。<br>3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。<br>4.行内元素使用相对定位不能转行内块元素。<br><br><h3>固定定位</h3><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">position:fixed;</span><br></pre></td></tr></table></figure><br><br><b>特点：</b><br>1.固定定位之后，不占据原来的位置（脱标）<br>2.元素使用固定定位之后，位置从浏览器出发。<br>3.元素使用固定定位之后，会转化为行内块（不推荐，推荐用display:inline-block;）<br><br><h3>定位（脱标）的盒子居中对齐</h3><br><pre>margin:0 auto; 只能让标准流的盒子居中对齐</pre><img src="http://t1.aixinxi.net/o_1cjdpikrl1nk6ben16tf16nejppa.png-w.jpg"><br><strong>定位的盒子居中：子绝父相，然后子盒子先往右走父盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)</strong><br><pre>PS：z-index:10改变层叠优先级，值越大优先级越高</pre><br><h1>标签包含规范</h1><br>- div可以包含所有的标签。<br>- p标签不能包含div h1等标签（一般包含行内元素）。<br>- h1可以包含p，div等标签（一般不这样）。<br>- 行内元素尽量包含行内元素，行内元素不要包含块元素。<br><img src="http://t1.aixinxi.net/o_1cjdppitm5dfrr814ksfm6odoa.png-w.jpg"><br><br><h3>规避脱标流</h3><br>- 尽量使用标准流。<br>- 标准流解决不了的使用浮动。<br>- 浮动解决不了的使用定位。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">margin-left:auto; //盒子一直往右冲，一直冲不动为止。也是 margin:0 auto; 的由来。</span><br></pre></td></tr></table></figure><br><br><h1>图片和文字垂直居中对齐</h1><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">vertical-align 主要用在 inline-block 标签上，效果最好。</span><br><span class="line">默认属性是: vertical-align:baseline;</span><br></pre></td></tr></table></figure><br><br>属性值标<br><img src="http://t1.aixinxi.net/o_1cjdptnbs121ha1h1usbmdsekca.png-w.jpg"><br><h1>CSS可见性</h1><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">overflow:hidden;   溢出隐藏    </span><br><span class="line">visibility:hidden;   隐藏元素    隐藏之后还保留原来的位置。</span><br><span class="line">display:none;       隐藏元素    隐藏之后不保留原来的位置。</span><br><span class="line">Display:block;     元素可见</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">----------------------------------------------------</span><br><span class="line">Display:none  和display:block  常配合js使用（如：鼠标经过时出现，鼠标离开时消失）。</span><br></pre></td></tr></table></figure><br><br><h1>css之内容移除（logo优化）</h1><br>- 方法一：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text-indent:-5000em;</span><br></pre></td></tr></table></figure><br><br> <img src="http://t1.aixinxi.net/o_1cjdq4e9t1aj0cik6um4uf81ca.png-w.jpg"><br> <img src="http://t1.aixinxi.net/o_1cjdq7rgf1h2p1pjpomf1fe919n8a.png-w.jpg"><br><b>之所以要写着两个字是为了SEO，因为背景图片SEO看不懂.</b><br><br>- 方法二：<br><b>将元素高度设置为0, 使用内边距将盒子撑开，给盒子使用overflow:hidden; 将文字隐藏。</b><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  width:300px;</span><br><span class="line">  height:0;</span><br><span class="line">  padding-top:100px;</span><br><span class="line">  overflow:hidden;</span><br><span class="line">  background:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br><br><h1>CSS精灵图</h1>

<p><img src="http://t1.aixinxi.net/o_1cjdqcskinjm1ikr124a7qq1fvga.png-w.jpg"><br>1：上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。</p>
<p>2：然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。<br>简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。</p>
<p><img src="http://t1.aixinxi.net/o_1cjdqedsn11ko1n2mgo4emcnfha.png-w.jpg"></p>
<p></p><h3>工作原理：</h3><br>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。<p></p>
<p>举例：<br><img src="http://t1.aixinxi.net/o_1cjdqmc9s1pq513ib1251og1geea.png-w.jpg"><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">        body,ul,li&#123;</span><br><span class="line">            margin: 0;</span><br><span class="line">            padding: 0;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        ul, li&#123;</span><br><span class="line">            list-style: none;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .box&#123;</span><br><span class="line">            height: 48px;</span><br><span class="line">            background: #222;</span><br><span class="line">            margin-top: 50px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .con&#123;</span><br><span class="line">            width: 1182px;</span><br><span class="line">            height: 48px;</span><br><span class="line">            margin: 0 auto;</span><br><span class="line">            position: relative;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .con ul li&#123;</span><br><span class="line">            float: left;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .con ul li a&#123;</span><br><span class="line">            text-decoration: none;</span><br><span class="line">            color: #fff;</span><br><span class="line">            display: inline-block;</span><br><span class="line">            height: 48px;</span><br><span class="line">            font: 16px/48px microsoft yahei;</span><br><span class="line">            padding: 0 18px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .con ul li a:hover&#123;</span><br><span class="line">            background: #2774A2;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .con .hot&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">            width: 31px;</span><br><span class="line">            height: 21px;</span><br><span class="line">            background: url(&quot;spirit.png&quot;) -58px 0;</span><br><span class="line">            left:221px;</span><br><span class="line">            bottom:35px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .con .new&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">            width: 31px;</span><br><span class="line">            height: 21px;</span><br><span class="line">            background: url(&quot;spirit.png&quot;) -135px 0;</span><br><span class="line">            left:90px;</span><br><span class="line">            bottom:35px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div class=&quot;box&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;con&quot;&gt;</span><br><span class="line">            &lt;ul&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Java&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;IOS&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;PHP&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;C/C++&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;UI设计&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;前端与移动开发&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;问答专区&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Python&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网络营销&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;活动专区&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">            &lt;/ul&gt;</span><br><span class="line">            &lt;div class=&quot;hot&quot;&gt;&lt;/div&gt;</span><br><span class="line">            &lt;div class=&quot;new&quot;&gt;&lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<p><img src="http://t1.aixinxi.net/o_1cjdqogid1bu6e2910611tppou6a.png-w.jpg"><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PS：之所以选择con作为父盒子而不是box作为父盒子，是因为box的宽度不定，不同的显示器宽度不同，那么new和hot的定位就有问题。</span><br></pre></td></tr></table></figure></p>
<h1>CSS滑动门</h1>

<p><img src="http://t1.aixinxi.net/o_1cjdr0h8j1bdn6hmbe71sha1gl2a.png-w.jpg"><br>边上是这种圆弧型的或者其他形状的，可以变换长度的样式。</p>
<p><b>特点：浮动之后宽度不是父盒子的宽度，而是内容撑开的宽度。</b><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">        body,ul,li&#123;</span><br><span class="line">            margin: 0;</span><br><span class="line">            padding: 0;</span><br><span class="line">        &#125;</span><br><span class="line">        ul,li&#123;</span><br><span class="line">            list-style: none;</span><br><span class="line">        &#125;</span><br><span class="line">        ul li&#123;</span><br><span class="line">            float: left;</span><br><span class="line">        &#125;</span><br><span class="line">        ul li a&#123;</span><br><span class="line">            display: inline-block;</span><br><span class="line">            height: 35px;</span><br><span class="line">            background: url(&quot;bg_r1_c1.png&quot;) no-repeat;</span><br><span class="line">            padding-left: 7px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        ul li a span&#123;</span><br><span class="line">            display: inline-block;</span><br><span class="line">            height: 35px;</span><br><span class="line">            background: url(&quot;bg_r1_c2.png&quot;) right;</span><br><span class="line">            padding-right: 25px;</span><br><span class="line">            color: #fff;</span><br><span class="line">            line-height: 35px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        ul li a:hover&#123;</span><br><span class="line">            background: url(&quot;bbg_r1_c1.png&quot;);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        ul li a:hover span&#123;</span><br><span class="line">            background: url(&quot;bbg_r1_c2.png&quot;) right;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;网易云音乐&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;微信&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;蚂蚁花呗&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<p>微信案例：<br><img src="http://t1.aixinxi.net/o_1cjdr37d21co1e2a4b0gu5upqa.png-w.jpg"><br><b>现象：鼠标经过时，背景凸起。</b><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">        body,ul,li,a,span&#123;</span><br><span class="line">            margin: 0;</span><br><span class="line">            padding: 0;</span><br><span class="line">        &#125;</span><br><span class="line">        ul,li&#123;</span><br><span class="line">            list-style: none;</span><br><span class="line">        &#125;</span><br><span class="line">        .nav&#123;</span><br><span class="line">            height: 74px;</span><br><span class="line">            background: url(&quot;weixin_bg.jpg&quot;);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .nav-con&#123;</span><br><span class="line">            width: 600px;</span><br><span class="line">            margin: 0 auto;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        li&#123;</span><br><span class="line">            float: left;</span><br><span class="line">            height: 74px;</span><br><span class="line">            line-height: 74px;</span><br><span class="line">            margin-right: 60px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        li a&#123;</span><br><span class="line">            display: inline-block;</span><br><span class="line">            text-decoration: none;</span><br><span class="line">            color: #fff;</span><br><span class="line">            height: 33px;</span><br><span class="line">            line-height: 33px;</span><br><span class="line">            background: url(&quot;bg.png&quot;) no-repeat 0 -144px;</span><br><span class="line">            padding-left: 13px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        a span&#123;</span><br><span class="line">            display: inline-block;</span><br><span class="line">            height: 33px;</span><br><span class="line">            background: url(&quot;bg.png&quot;) no-repeat right -144px;</span><br><span class="line">            padding-right: 13px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        a:hover&#123;</span><br><span class="line">            background: url(&quot;bg.png&quot;) no-repeat 0 -192px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        a:hover span&#123;</span><br><span class="line">            background: url(&quot;bg.png&quot;) no-repeat right -192px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div class=&quot;nav&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;nav-con&quot;&gt;</span><br><span class="line">            &lt;ul&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;首页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;下载文章&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;微信公众公众公众助手&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">            &lt;/ul&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<p style="color:#eee;font-weight: bold;">如有错误，请指点！</p>


        
    </div>
        <footer class="article-footer clearfix">
<div class="article-catetags">


  <div class="article-tags">
  
  <span></span> <a href="/tags/前端/">前端</a>
  </div>

</div>



	<div class="article-share" id="share">
	
	  <div data-url="https://hdiebk.github.io/2018/07/24/blog-css/" data-title="前端学习-CSS | 哆啦A梦BLOG" data-tsina="2915578625" class="share clearfix">
	  </div>
	
	</div>


</footer>


    </article>
    
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2018/07/30/blog-js/" title="前端学习-JS快速预览">
  <strong>上一篇：</strong><br/>
  <span>
  前端学习-JS快速预览</span>
</a>
</div>


<div class="next">
<a href="/2018/05/25/blog1/"  title="前端学习-HTML">
 <strong>下一篇：</strong><br/> 
 <span>前端学习-HTML
</span>
</a>
</div>

</nav>

    



<div id="SOHUCS" style="width: 95%;"></div>

</div>

      <div class="openaside"><a class="navbutton" href="#" title="Show Sidebar"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">Contents</strong>
 
 <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">1.</span> <span class="toc-text">CSS-初印象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">1.0.1.</span> <span class="toc-text">CSS全称为层叠样式表 (Cascading Style Sheets)(级联样式表)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">2.</span> <span class="toc-text">1.CSS三种写法：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">2.0.1.</span> <span class="toc-text">2.认识标签类型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">3.</span> <span class="toc-text">CSS选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.1.</span> <span class="toc-text">选择器是一种选择标签的过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.2.</span> <span class="toc-text">标签选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.3.</span> <span class="toc-text">属性选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.4.</span> <span class="toc-text">类选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.5.</span> <span class="toc-text">ID选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">3.0.6.</span> <span class="toc-text">通配符</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">4.</span> <span class="toc-text">css复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.1.</span> <span class="toc-text">交集选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.2.</span> <span class="toc-text">后代选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.3.</span> <span class="toc-text">子代选择器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.4.</span> <span class="toc-text">并集选择器（群选择器）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">4.0.5.</span> <span class="toc-text">伪类选择器</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">5.</span> <span class="toc-text">文本元素</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.1.</span> <span class="toc-text">属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.2.</span> <span class="toc-text">文本属性连写</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.3.</span> <span class="toc-text">文字的表达方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">5.0.4.</span> <span class="toc-text">文本修饰</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">6.</span> <span class="toc-text">CSS三大特性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">6.0.1.</span> <span class="toc-text">层叠性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">6.0.2.</span> <span class="toc-text">继承性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">6.0.3.</span> <span class="toc-text">优先级</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">7.</span> <span class="toc-text">背景属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">7.0.1.</span> <span class="toc-text">背景属性连写</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">7.0.2.</span> <span class="toc-text">行高</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">8.</span> <span class="toc-text">盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.1.</span> <span class="toc-text">border（边框）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.2.</span> <span class="toc-text">padding（内边距）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.3.</span> <span class="toc-text">margin（外边距）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.4.</span> <span class="toc-text">标准盒子模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">8.0.5.</span> <span class="toc-text">IE盒子模型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">9.</span> <span class="toc-text">浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.1.</span> <span class="toc-text">文档流（标准流）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.2.</span> <span class="toc-text">浮动布局</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.3.</span> <span class="toc-text">制作导航（经常使用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">9.0.4.</span> <span class="toc-text">清除浮动</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">10.</span> <span class="toc-text">CSS初始化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.1.</span> <span class="toc-text">overflow</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.2.</span> <span class="toc-text">定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.3.</span> <span class="toc-text">静态定位（默认值）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.4.</span> <span class="toc-text">绝对定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.5.</span> <span class="toc-text">相对定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.6.</span> <span class="toc-text">固定定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">10.0.7.</span> <span class="toc-text">定位（脱标）的盒子居中对齐</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">11.</span> <span class="toc-text">标签包含规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">11.0.1.</span> <span class="toc-text">规避脱标流</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">12.</span> <span class="toc-text">图片和文字垂直居中对齐</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">13.</span> <span class="toc-text">CSS可见性</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">14.</span> <span class="toc-text">css之内容移除（logo优化）</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">15.</span> <span class="toc-text">CSS精灵图</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#undefined"><span class="toc-number">15.0.1.</span> <span class="toc-text">工作原理：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-number">16.</span> <span class="toc-text">CSS滑动门</span></a></li></ol>
 
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="Hide Sidebar"></a></div>
<aside class="clearfix">

  

  
<div class="tagslist">
	<p class="asidetitle">Tags</p>
		<ul class="clearfix">
		
			
				<li><a href="/tags/前端/" title="前端">前端<sup>3</sup></a></li>
			
		
			
				<li><a href="/tags/Hexo/" title="Hexo">Hexo<sup>1</sup></a></li>
			
		
			
		
		</ul>
</div>


  <div class="rsspart">
	<a href="/atom.xml" target="_blank" title="rss">RSS</a>
</div>

  

</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	<div class="line">
		<span></span>
		<div class="author"></div>
	</div>
	
	
	<section class="info">
		<p> 用技术链接世界尽头. <br/>
			This is my blog,believe it or not.</p>
	</section>
	 
	<div class="social-font" class="clearfix">
		
		<a href="http://weibo.com/2915578625" target="_blank" class="icon-weibo" title="微博"></a>
		
		
		<a href="https://github.com/https://github.com/hdiebk" target="_blank" class="icon-github" title="github"></a>
		
		
		
		
		
		
		
		<a href="http://www.zhihu.com/people/hdiebk" target="_blank" class="icon-zhihu" title="知乎"></a>
		
		
		
		<a href="mailto:2510129345@qq.com" target="_blank" class="icon-email" title="Email Me"></a>
		
	</div>
			
		

		<p class="copyright">
		Powered by <a href="http://hexo.io" target="_blank" title="hexo">DLAM</a> and Theme by <a href="https://github.com/hdiebk" target="_blank" title="Hdiebk">Hdiebk</a> © 2018
		
		<a href="/about" target="_blank" title="大雄の梦">大雄の梦</a>
		<br>
		<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
 	 <script>
 			 var now = new Date();
 			 function createtime() {
 					 var grt= new Date("04/20/2018 00:00:00");//此处修改你的建站时间或者网站上线时间
 					 now.setTime(now.getTime()+250);
 					 days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
 					 hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
 					 if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
 					 mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
 					 seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
 					 snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
 					 document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
 					 document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
 			 }
 	 setInterval("createtime()",250);
 	 </script>
		</p>
</div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span id="busuanzi_container_site_pv">
    &nbsp;&nbsp;Total visits:&nbsp;<span id="busuanzi_value_site_pv"></span>
</span>
<span id="busuanzi_container_site_uv">
  &nbsp;&nbsp;You are Visiter No.<span id="busuanzi_value_site_uv"></span>
</span>
</footer>
    <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<script src="/js/jquery.qrcode-0.12.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    $('#toc.toc-aside').css('display','block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
  
        getSize();
        if (myWidth >= 1024) {
          c.click();
        }
  
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else{
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  c.click(function(){
    ta.css('display', 'block').addClass('fadeIn');
  });
  o.click(function(){
    ta.css('display', 'none');
  });
  $(window).scroll(function(){
    ta.css("top",Math.max(140,320-$(this).scrollTop()));
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(){ 
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina'),
      description = $this.attr('description');
  var html = [
  '<div class="hoverqrcode clearfix"></div>',
  '<a class="overlay" id="qrcode"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="微信"></a>',
  '<a href="http://widget.renren.com/dialog/share?resourceUrl=' + encodedUrl + '&srcUrl=' + encodedUrl + '&title=' + title +'" class="article-share-renren" target="_blank" title="人人"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="微博"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);

  $('.hoverqrcode').hide();

  var myWidth = 0;
  function updatehoverqrcode(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
    var qrsize = myWidth > 1024 ? 200:100;
    var options = {render: 'image', size: qrsize, fill: '#2ca6cb', text: url, radius: 0.5, quiet: 1};
    var p = $('.article-share-qrcode').position();
    $('.hoverqrcode').empty().css('width', qrsize).css('height', qrsize)
                          .css('left', p.left-qrsize/2+20).css('top', p.top-qrsize-10)
                          .qrcode(options);
  };
  $(window).resize(function(){
    $('.hoverqrcode').hide();
  });
  $('.article-share-qrcode').click(function(){
    updatehoverqrcode();
    $('.hoverqrcode').toggle();
  });
  $('.article-share-qrcode').hover(function(){}, function(){
      $('.hoverqrcode').hide();
  });
});   
</script>







<script type="text/javascript">
  (function(){
    var appid = 'cytAnbWNC';
    var conf = 'prod_c156e4212361abbe6fe1d21b829b6b54';
    var width = window.innerWidth || document.documentElement.clientWidth;
    if (width < 960) {
      window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })();
</script>





<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
}); 
</script>



<!-- Analytics Begin -->



<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?e6d1f421bbc9962127a50488f9ed37d1";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>



<!-- Analytics End -->

<!-- Totop Begin -->

	<div id="totop">
	<a title="Back to Top"><img src="/img/scrollup.png"/></a>
	</div>
	<script src="/js/totop.js"></script>

<!-- Totop End -->

<!-- MathJax Begin -->
<!-- mathjax config similar to math.stackexchange -->


<!-- MathJax End -->

<!-- Tiny_search Begin -->

<!-- Tiny_search End -->

  </body>
</html>
